<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>生态圈系统-优惠券-按客户发放</title>
  <link rel="icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
  <link rel="shortcut icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="plugins/bootstrap-4.0.0/css/bootstrap.min.css" th:href="@{/plugins/bootstrap-4.0.0/css/bootstrap.min.css}" type="text/css" rel="stylesheet"/>
  <link href="css/materialize.css" th:href="@{/css/materialize.css}" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="plugins/perfect-scrollbar/perfect-scrollbar.css" th:href="@{/plugins/perfect-scrollbar/perfect-scrollbar.css}" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" th:href="@{/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css}" type="text/css" rel="stylesheet"/>
  <link href="plugins/bootstrap-sweetalert/sweetalert.css" th:href="@{/plugins/bootstrap-sweetalert/sweetalert.css}" type="text/css" rel="stylesheet"/>
  <link href="css/style.css" th:href="@{/css/style.css}" type="text/css" rel="stylesheet"/>
</head>
<body>
  <header>
    <nav class="" role="navigation" style="background-color: #f4f6f9;">
      <div class="nav-wrapper">
        <ul class="right hide-on-med-and-down">
          <!-- 
          <li><a class="blue-text waves-effect dropdown-trigger" href="#!" data-target="dropdown1" style="vertical-align: top;"><span th:if="${session.user!=null}" th:text="${session.user.username}">admin</span><i class="material-icons right">arrow_drop_down</i></a></li>
           -->
          <li><a class="grey-text waves-effect dropdown-trigger" href="#!" data-target="dropdown1" style="vertical-align: top;"><span sec:authentication="name">admin</span><i class="material-icons right">arrow_drop_down</i></a></li>
          <ul id="dropdown1" class="dropdown-content">
            <li><a href="#modal3" class="waves-effect grey-text modal-trigger">修改密码</a></li>
            <li><a th:href="@{/admin/logout}" class="waves-effect grey-text">退出登录</a></li>
          </ul>
        </ul>

        <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      </div>
    </nav>
  </header>

  <div th:replace="common/aside_admin :: aside"></div>

  <main class="" style="height: calc(100% - 48px); background-color: #f4f6f9;">
    <div class="row">
      <h6 style="margin: 0 0 0 15px;" id="page-title" active-menu="coupon-allocate-by-customer-menu">按客户发放</h6>
    </div>

    <div class="row white" style="margin: 0 15px; height: inherit;">

      <div class="col s12" style="height: inherit;"> <!-- Note that "m8 l9" was added -->
        <div class="">
          <form id="search">
            <div class="row" style="margin-bottom: 0;">
              <div class="input-field col s2">
                <input type="text" name="customerNumber" id="customer_id" th:value="${search.customerNumber}">
                <label for="customer_id">客户号</label>
              </div>
              <div class="input-field col s2">
                <input type="text" name="nickname" id="nickname_s" th:value="${search.nickname}">
                <label for="nickname_s">昵称</label>
              </div>
              <div class="input-field col s2">
                <input type="text" name="phone" id="phone_s" th:value="${search.phone}">
                <label for="phone_s">手机号码</label>
              </div>
              <div class="input-field col s2 blue-text">
                <select name="customerLevel">
                  <option value="" selected>客户等级</option>
                  <option value="1" th:selected="${search.customerLevel} == 1">1</option>
                  <option value="2" th:selected="${search.customerLevel} == 2">2</option>
                  <option value="3" th:selected="${search.customerLevel} == 3">3</option>
                  <option value="4" th:selected="${search.customerLevel} == 4">4</option>
                </select>
              </div>
              <div class="input-field col s1">
                <a th:href="'javascript:search();'" class="waves-effect waves-light btn-floating search-btn"><i class="material-icons right">search</i></a>
              </div>
              <div class="col s2">
                <div style="position: relative; height: 70px;">
                </div>
              </div>
              <div class="input-field col s1">
                <!-- 
                <a class="waves-effect waves-light btn-floating btn-small blue right modal-trigger" href="#modal2"><i class="large material-icons">add</i></a>
                 -->
              </div>
            </div>
          </form>
        </div>

        <div style="padding-top: 0; height: inherit;">
          <div id="customer-div" style="height: 250px;">
	          <div>
	            <table class="responsive-table">
	              <thead>
	                <tr>
	                  <!-- <th width="10%">
	                    <label>
	                      <input type="checkbox" id="select_all"/>
	                      <span></span>
	                    </label>
	                  </th> -->
	                  <th width="20%">客户号</th>
	                  <th width="20%">昵称</th>
	                  <th width="20%">手机号</th>
	                  <th width="20%">客户等级</th>
	                  <th width="20%">操作</th>
	                </tr>
	              </thead>
	            </table>
	          </div>
	
	          <div id="table_body_div" style="height: calc(100% - 48px); position: relative;">
              <div style="height: calc(100% - 30px);">
		            <table class="highlight responsive-table">
		              <thead>
		                <tr>
		                  <th class="no-padding" width="20%"></th>
		                  <th class="no-padding" width="20%"></th>
		                  <th class="no-padding" width="20%"></th>
		                  <th class="no-padding" width="20%"></th>
		                  <th class="no-padding" width="20%"></th>
		                </tr>
		              </thead>
		              <tbody id="customer_tbody">
		                <tr th:each="c : ${customers}" th:id="'customer_row_'+${c.id}" th:attr="customer_id=${c.id}">
		                  <!-- <td>
		                    <label>
		                      <input type="checkbox" checked="checked" />
		                      <span></span>
		                    </label>
		                  </td> -->
		                  <td th:text="${c.customerNumber}" th:title="${c.customerNumber}">1</td>
		                  <td th:text="${c.nickname}" th:title="${c.nickname}">biu~</td>
		                  <td th:text="${c.phone}" th:title="${c.phone}">13111111111</td>
		                  <td th:text="${c.customerLevel}" th:title="${c.customerLevel}">1</td>
		                  <td class="no-padding">
		                    <a th:id="'add_btn_'+${c.id}" th:href="'javascript:addToSelectedDiv(\''+${c.id}+'\');'"><i class="material-icons">add_circle_outline</i></a>
		                  </td>
		                </tr>
		              </tbody>
		            </table>
              </div>
              <div>
			          <ul th:if="${customers.totalPages} > 1" class="pagination" style="bottom: unset;">
			            <!-- <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
			            <li class="active"><a href="#!">1</a></li>
			            <li class="waves-effect"><a href="#!">2</a></li>
			            <li class="waves-effect"><a href="#!">3</a></li>
			            <li class="waves-effect"><a href="#!">4</a></li>
			            <li class="waves-effect"><a href="#!">5</a></li>
			            <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li> -->
			          </ul>
		          </div>
          
	          </div>
          </div>
          <hr style="margin-top: 0;">
          <div id="params-div" class="row" style="margin-bottom: 0;">
            <div class="col s3 input-field">
              <select name="activityId">
                <option value="" disabled selected>请选择</option>
                <option th:each="a : ${activities}" th:value="${a.id}"  th:text="${a.title}"></option>
              </select>
              <label>权益</label>
            </div>
            <div class="col s3 input-field">
              <input type="number" name="perCustomer" id="perCustomer" min="1">
              <label for="perCustomer">每客户发放数量</label>
            </div>
            <div class="col s3 input-field"></div>
            <div class="col input-field">
              <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:allocateSubmit();" style="margin-right: 30px;"><i class="material-icons right"></i>发放优惠券</a>
            </div>
          </div>
          <div id="selected-div" style="height: calc(100% - 350px); position: relative;">
            <table class="highlight responsive-table">
              <thead>
                <tr>
                  <th class="no-padding" width="20%"></th>
                  <th class="no-padding" width="20%"></th>
                  <th class="no-padding" width="20%"></th>
                  <th class="no-padding" width="20%"></th>
                  <th class="no-padding" width="20%"></th>
                </tr>
              </thead>
              <tbody id="selected_tbody">
              </tbody>
            </table>
          </div>

        </div>

      </div>

  	</div>
  </main>

  <!-- <footer class="white page-footer teal">
    <div class="footer-copyright">
      <div class="black-text container">
      Made by <a class="brown-text text-lighten-3" href="http://materializecss.com">Materialize</a>
      </div>
    </div>
  </footer> -->
  
  <div th:replace="common/update_pwd :: #modal3"></div>

  <!--  Scripts-->
  <script src="js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
  <script src="js/materialize.js" th:src="@{/js/materialize.js}"></script>
  <script src="plugins/perfect-scrollbar/perfect-scrollbar.min.js" th:src="@{/plugins/perfect-scrollbar/perfect-scrollbar.min.js}"></script>
  <script src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" th:src="@{/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
  <script src="plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js" th:src="@{/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}" charset="UTF-8"></script>
  <script src="plugins/bootstrap-sweetalert/sweetalert.min.js" th:src="@{/plugins/bootstrap-sweetalert/sweetalert.min.js}"></script>
  <script src="js/common.js" th:src="@{/js/common.js}"></script>
  <script src="js/jquery.page.js" th:src="@{/js/jquery.page.js}"></script>
  <script th:inline="javascript">
    $(".pagination").createPage({
      pageCount: [[${customers.totalPages}]],
      current: [[${customers.number}]] + 1,
      backFn:function(p){
        window.location.href = "customer?page=" + (p - 1) + "&" + formParamsSerialize($("#search").find('input, select'));
      }
    });

    function search() {
    	console.log($("#search").serialize());
    	window.location.href = "customer?" + formParamsSerialize($("#search").find('input, select'));
    }
    
    function addToSelectedDiv(customerId) {
    	//console.log($('#customer_row_' + customerId));
    	console.log($('#selected_tbody').children('tr').length);
    	if($('#selected_tbody').children('tr').length >= 20) {
    		swal("最多只能选择20个信托客户!", {
          icon: "error",
        });
        return;
    	}
    	var minus_btn_str = '<a id="minus_btn_' + customerId + '" href="javascript:addToCustomerDiv(\'' + customerId + '\');"><i class="material-icons">remove_circle_outline</i></a>'
    	$('#add_btn_' + customerId).replaceWith(minus_btn_str);
    	$('#selected_tbody').append($('#customer_row_' + customerId));
    }
    
    function addToCustomerDiv(customerId) {
      var add_btn_str = '<a id="add_btn_' + customerId + '" href="javascript:addToSelectedDiv(\'' + customerId + '\');"><i class="material-icons">add_circle_outline</i></a>'
      $('#minus_btn_' + customerId).replaceWith(add_btn_str);
      $('#customer_tbody').append($('#customer_row_' + customerId));
    }

    function allocateSubmit() {
    	var activityId = $('select[name="activityId"]').val();
      if(activityId == null || activityId == "") {
        swal("请选择权益!", {
          icon: "error",
        });
        return;
      }
      var perCustomer = $('input[name="perCustomer"]').val();
      if(perCustomer == null || perCustomer == "") {
    	  swal("请输入每客户发放数量!", {
          icon: "error",
        });
        return;
      }
      var customerIds = new Array();
      $('#selected_tbody tr').each(function(i){
        console.log($(this).attr("customer_id"));
        customerIds.push($(this).attr("customer_id"));
      });
      $.ajax({
        url: "/kangchenjunga/api/v1/coupons/services/allocate/" + activityId + "/by-customer?perCustomer=" + perCustomer,
        data: "[" + customerIds.toString() + "]",
        contentType: "application/json;charset=utf-8",
        type: "POST",
        headers: {
          Accept: "application/json"
        },
        dataType: "json",
        success: function(data, textStatus) {
          //console.log(data);
          if(data.couponAmount == 0 && data.customerAmount > 0) {
            swal({
              title: "发放失败!",
              text: "共需要 " + (data.customerAmount * data.couponPerCustomer) + " 张优惠券，现有数量不足",
              icon: "error",
              //timer: 2000,
            });
          } else {
            swal({
              title: "发放成功!",
              text: "共发放" + data.customerAmount + "个客户，每客户" + data.couponPerCustomer + "张，共" + (data.customerAmount * data.couponPerCustomer) + "张",
              icon: "success",
              //timer: 2000,
            });
          }
          //window.location.reload();
          $('#modal1').modal('close');
        },
        error: function (data, textStatus, errorThrown) {
          console.log(data);
          swal({
            title: "发放失败!",
            text: data.responseJSON.message == '' ? "请联系管理员!" : data.responseJSON.message,
            icon: "error",
            //timer: 2000,
          });
          M.updateTextFields();
        }
      });
      
    }

  </script>

  </body>
</html>
